<template>
  <view>
    <!-- 状态栏安全区域 -->
    <view 
      v-if="type === 'status'" 
      class="status-bar-safe-area" 
      :style="{ height: statusBarHeight + 'px' }"
    ></view>
    
    <!-- 导航栏安全区域 -->
    <view 
      v-if="type === 'nav'" 
      class="nav-bar-safe-area" 
      :style="{ height: navBarHeight + 'px' }"
    ></view>
    
    <!-- 底部安全区域 -->
    <view 
      v-if="type === 'bottom'" 
      class="bottom-safe-area" 
      :style="{ height: safeAreaBottom + 'px' }"
    ></view>
    
    <!-- 顶部安全区域（包括状态栏和导航栏） -->
    <view 
      v-if="type === 'top'" 
      class="top-safe-area" 
      :style="{ height: (statusBarHeight + navBarHeight) + 'px' }"
    ></view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import systemUtils from '../common/utils/system.js'

const props = defineProps({
  type: {
    type: String,
    default: 'status' // status, nav, bottom, top
  }
})

const statusBarHeight = ref(0)
const navBarHeight = ref(0)
const safeAreaBottom = ref(0)

onMounted(() => {
  statusBarHeight.value = systemUtils.getStatusBarHeight()
  navBarHeight.value = systemUtils.getNavBarHeight()
  safeAreaBottom.value = systemUtils.getSafeAreaBottom()
})
</script>

<style scoped>
.status-bar-safe-area {
  width: 100%;
  background-color: transparent;
}

.nav-bar-safe-area {
  width: 100%;
  background-color: transparent;
}

.bottom-safe-area {
  width: 100%;
  background-color: transparent;
}

.top-safe-area {
  width: 100%;
  background-color: transparent;
}
</style>